<template>
	<view class="p30">
		<view class="mb30 plr24 ptb30 border-r1 bf">
			<view class="flex_a mb10">
				<text class="mr24">联系方式：{{ info.phone }}</text>
				<view class="flex_aj w40 h40 bd-green" @click="call(info.phone)"><u-icon name="phone-fill" color="#07C160" size="20"></u-icon></view>
			</view>
			<view class="mb10">反馈时间：{{ info.stime  }}</view>
			<view class="mb10">
				设备类型：{{ info.device_type == 1 ? '换电柜' : info.device_type == 2 ? '租车' : info.device_type == 3 ? '充电柜' : info.device_type == 4 ? '电池' : '--' }}
			</view>
			<view class="mb10">设备编号：{{ info.device_no }}</view>
			<view class="flex mb10">
				<text class="whn">设备地址：</text>
				<text class="flex1 primary" @click="navigation">{{ info.deviceAddr }}</text>
			</view>
		</view>
		<view class="mb30 plr24 ptb30 border-r1 bf">
			<view class="mb10">现场照片</view>
			<view class="flex_a flexWW">
				<block v-for="(item, index) in info.fault_img" :key="index">
					<view class="w140 h140 mr20 mb20 border-r1">
						<image :src="item | formatImg" mode="widthFix" style="width: 140upx;height: 140upx;" @click="previewImage(item, info.fault_img)"></image>
					</view>
				</block>
			</view>
		</view>
		<view class="mb30 plr24 ptb30 border-r1 bf">
			<view class="mb10">用户备注</view>
			<view>{{ info.fault_content }}</view>
		</view>
		<view class="flex_sb h100 mb100 plr24 border-r1 bf">
			<text class="mb10">处理结果</text>

			<view class="flex_a" v-if="info.status == 1">
				<switch :checked="isHandle" color="#07C160" @change="isHandle = !isHandle" />
				<text class="pl10" :class="isHandle ? 'green' : ''">{{ isHandle ? '已处理' : '未处理' }}</text>
			</view>
			<view v-else>已处理</view>
		</view>
		<view class="plr40 mb30" v-if="info.status == 1"><u-button type="primary" shape="circle" @click="updateFault">提交</u-button></view>
	</view>
</template>

<script>
import { updateFault, faultDetail } from '@/api/admin.js'
export default {
	data() {
		return {
			isHandle: false,
			id: '',
			info: {
				fault_img: []
			}
		}
	},
	onLoad(e) {
		this.id = e.id
		this.faultDetail()
	},
	methods: {
		async faultDetail() {
			const res = await faultDetail({ id: this.id })
			const info = res.data
			info.fault_img = info.fault_img.split(',')
			this.info = info
		},
		// 更新故障为已处理
		async updateFault() {
			if(!this.isHandle) {
			    const result = this.confirm({
					content: '该故障是否已处理',
					confirmText: '已处理',
					cancelText: '未处理'
				})
				
				if(!result.confirm) {
					return false
				} 
			}
			const res = await updateFault({ id: this.id })
			this.toast('更新成功')
			this.faultDetail()
		},
		navigation() {
			uni.openLocation({
				latitude: this.info.lat * 1,
				longitude: this.info.lng * 1,
				// name: this.info.device_name,
				address: this.info.deviceAddr,
				success: () => {}
			})
		}
	}
}
</script>

<style lang="scss">
.bd-green {
	border: 1px solid #07c160;
	border-radius: 50%;
}
</style>
